<template>
  <div class="ant-pro-global-header-index-right">
    <span class="mr30">{{ currTime }}</span>
    <a-tooltip title="刷新页面">
      <span class="header-btn" @click="refresh()">
        <i class="fa fa-refresh" :style="iconStyle" />
      </span>
    </a-tooltip>
    <a-tooltip title="切换全屏">
      <span class="header-btn" @click="toScreenFull()">
        <i class="fa fa-arrows-alt" :style="iconStyle" />
      </span>
    </a-tooltip>
    <a-tooltip title="消息中心" @click="toMsgCenter()">
      <span class="header-btn">
        <a-badge dot count="12">
          <i class="fa fa-bell" :style="iconStyle" />
        </a-badge>
      </span>
    </a-tooltip>
    <AvatarDropdown :class="prefixCls" />
  </div>
</template>

<script>
import AvatarDropdown from './AvatarDropdown'
import screenfull from 'screenfull'
export default {
  components: {
    AvatarDropdown
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    }
  },
  data () {
    return {
      currTime: ''
    }
  },
  mounted () {
    setInterval(() => {
      this.generateTime()
    }, 1000)
  },
  computed: {
    iconStyle () {
      return {
        fontSize: '18px',
        color: '#fff'
      }
    }
  },
  methods: {
    refresh () {
      this.$emit('refresh')
    },
    toMsgCenter () {
      this.$router.push(`/system/msg`)
    },
    toScreenFull () {
      if (screenfull.isEnabled) {
        screenfull.toggle()
      }
    },
    generateTime () {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() // 日
      const week = date.getDay() // 星期
      const weekArr = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ]
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.currTime = `${year}年${month}月${day}日 ${weekArr[week]} ${hour}:${minute}:${second}`
    }
  }
}
</script>
